<template>

	<view class="Setting">
		<AppNavbar :bgColor="'#ededed'" :title="title" titlecolor="#000" leftIconColor="#000">
		</AppNavbar>
		<view class="Setting-input px-3 mt-5" v-for="(item,index) in list">
			<text class="f-size-14 font-weight-600">{{item.label}}</text>
			<up-input :placeholder="item.placeholder" style="background-color: #fff; "
				:style="{border:key == index?'1px solid #11E2BD':'none' }" border class="mt-1 Setting-input-box"
				fontSize="24rpx" @focus="key=index" :password="item.password"> <template #suffix>

					<image style="width: 40rpx;height: 40rpx;" src="/static/icon/if-eye-blocked1@3x.png" mode=""
						@click="item.password=!item.password" v-if="item.type==='password'">
					</image>
					<view class="Setting-code " v-if="item.type==='code'">
						<up-button
							style="height:50rpx;width: 200rpx; border-color: #505efa; color: #505efa; font-size: 18rpx;"
							class="font-weight-600" @tap="getCode">{{tips}}{{Number(tips)?'s':''}}
						</up-button>
					</view>
				</template></up-input>
		</view>
		<view class="Setting-code mt-1 pr-3" v-if="type==='email'">
			<up-button style="height: 60rpx; border-color: #505efa; color: #505efa; " class="f-size-12 font-weight-600"
				@tap="getCode">{{tips}}{{Number(tips)?'s':''}} </up-button>
		</view>
		<view class="Setting-code mt-1 pr-3" v-if="type==='password'">

			<text style="color: #505efa;" class="f-size-12 mt-1 font-weight-600" @click="toForget">Forgot your old
				password?</text>
		</view>
		<button class="Setting-button mx-3  color-fff" @click="successBackFun">OK</button>
	</view>
	<up-modal :show="popAttr.show">

		<view class="flex-between-center flex-column">
			<image src="/static/image/success.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
			<text class="font-weight-600 mt-2">Modified successfully</text>
		</view>

		<template #confirmButton>
			<up-button text="OK" plain shape="circle" size="small" color="#11e2bd" style="width: 150rpx;"
				@click="popAttr.show=false"></up-button>
		</template>
	</up-modal>

</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	const props = defineProps(['list', 'title', 'type'])
	const tips = ref('Get verification code');
	const Interval = ref(null)
	const key = ref(0)
	const getCode = () => {
		if (Interval.value) {
			return
		}
		// if (uCodeRef.canGetCode) {
		// 模拟向后端请求验证码
		uni.showLoading({
			title: '正在获取验证码',
		});
		setTimeout(() => {
			uni.hideLoading();
			// 这里此提示会被start()方法中的提示覆盖
			uni.$u.toast('验证码已发送');
			tips.value = 5
			Interval.value = setInterval(() => {
				if (tips.value == 1) {
					clearInterval(Interval.value)
					Interval.value = null
					tips.value = 'get verification code'
				} else {
					tips.value -= 1
				}
			}, 1000)
		}, 2000);
		// }
	};


	const popAttr = reactive({
		show: false,
		onlyCancel: true
	})

	function successBackFun() {
		console.log(111);
		popAttr.show = true
	}

	function toForget() {
		uni.$to('/pages/Setting/forgotPassword')
	}
</script>

<style lang="scss" scoped>
	.Setting {

		// border: 1px solid red;
		background-color: #ededed;
		min-height: 100vh;

		.Setting-input {
			.Setting-input-box {
				box-shadow: 0px 2px 6px 0px rgba(232, 232, 234, 1) !important;
			}
		}

		.Setting-code {
			display: flex;
			justify-content: flex-end;

			button {
				width: 300rpx;
				margin: 0;
			}
		}

		.Setting-button {
			background: $uni-bg-linear;
			margin-top: 120rpx;
		}
	}
</style>